<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>外卖首页</title>
    <link rel="stylesheet" href="/static/client/style.css">
    <script src="/static/client/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header class="cart-header">
        <!-- 移除返回符号相关代码 -->
        <h1>菩提阁</h1>
    </header>
    <!-- 滚动幻灯片 -->
    <div class="slider">
        <div class="slides">
            <img src="/static/client/images/slide.jpg" alt="Slide 1">
            <img src="/static/client/images/slide02.jpg" alt="Slide 2">
            <img src="/static/client/images/slide03.jpg" alt="Slide 3">
        </div>
    </div>
    <!-- 商品分类 -->
    <div class="product-categories">
        <a href="/" class="category-btn active" data-category="">全部</a>
        <a th:each="type,typeStat:${typeList}" th:href="|?typeId=${type.id}|" class="category-btn active"  th:text="${type.typename}" data-category=""></a>
    </div>
    <main>
      <div class="product-list">
        <div th:each="item,itemStat:${goodsList}" class="product" th:data-id="|${item.id}|" th:data-price="${item.price}">
            <!-- 修改图片 src 属性为 noImg.png -->
            <img th:src="${item.imageUrl}" th:alt="${item.productName}">
            <div class="product-info">
                <h3 th:text="${item.productName}"></h3>
                <p th:text="|价格:${item.price}元/份|"></p>
                <div class="product-actions">
                    <div class="quantity-control">
                        <button class="minus">-</button>
                        <input type="number" class="quantity" value="1" min="0">
                        <button class="plus">+</button>
                    </div>
                    <button class="add-to-cart">立即购买</button>
                </div>
            </div>
        </div>
    </div>
    </main>
    <!-- 底部导航 -->
    <div th:replace="~{/client/bottom-nav}" />
<!--    <footer class="bottom-nav">-->
<!--        <a href="index.html">-->
<!--            <img src="/static/client/images/home.png" alt="首页">-->
<!--            <span>首页</span>-->
<!--        </a>-->
<!--        <a href="address.html">-->
<!--            <img src="/static/client/images/location.png" alt="收货地址">-->
<!--            <span>收货地址</span>-->
<!--        </a>-->
<!--        <a href="user.html">-->
<!--            <img src="/static/client/images/user.png" alt="用户中心">-->
<!--            <span>用户中心</span>-->
<!--        </a>-->
<!--    </footer>-->
    <script src="/static/client/jquery-1.12.4.min.js"></script>
    <script src="/static/client/script.js"></script>
</body>
</html>
